<template>
  <div class="my">
    <div class="bg">
      <img :src="getmyData.userBg" alt="" />
    </div>
    <div class="My-box">
      <div class="my-user">
        <div class="user-img">
          <img :src="getmyData.userImg" alt="" />
        </div>
        <div class="user-msg">
          <div class="user-name">{{ getmyData.nickName }}</div>
          <div class="user-suggest">{{ getmyData.desc }}</div>
        </div>
      </div>
      <div class="my-rule">
        <router-link
          class="rule-list"
          v-for="(item, index) in myListData"
          :key="index"
          :to="{ name: item.routeName }"
        >
          <div class="rule-list-title">{{ item.title }}</div>
          <div class="rule-list-gt">
            <van-icon name="arrow" />
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  created() {
    this.getAccountInfo();
    this.getMyData();
  },
  data() {
    return {
      myListData: [
        {
          title: "个人资料",
          routeName: "Mydata",
        },
        {
          title: "我的订单",
          routeName: "Order",
        },
        {
          title: "我的收藏",
          routeName: "Mycollect",
        },
        {
          title: "地址管理",
          routeName: "Addresslist",
        },
        {
          title: "安全中心",
          routeName: "Safe",
        },
      ],
      getmyData: [],
    };
  },
  methods: {
    getMyData() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((res) => {
          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }
          this.getmyData = res.data.result;
          this.getmyData.forEach((v) => {
            this.getmyData = v;
          });
        })
        .catch((err) => {});
    },
    getAccountInfo() {
      this.axios({
        method: "get",
        url: "/findAccountInfo",
      })
        .then((res) => {
          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }
          this.accountInfo = res.data.result;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.my {
  overflow-y: auto;
}
.bg img {
  width: 100%;
  height: 200px;
  background-size: cover;
}
/deep/.van-image__img {
  height: 220px;
}

.My-box {
  position: relative;
  top: -60px;
  width: 95%;
  background-color: rgba(255, 255, 255, 0.6);
  margin: auto;
  border-radius: 10px;
}
.my-user {
  display: flex;
}
.user-img img {
  background-size: cover;
  width: 70px;
  height: 70px;
  margin: 15px;
  border-radius: 50%;
}
.user-msg {
  margin: 10px 10px;
}
.user-name {
  font-size: 18px;
  font-weight: bold;
  color: #0c34ba;
}
.user-suggest {
  margin-top: 15px;
  font-size: 14px;
  color: #777;
}
.my-rule {
  margin: 50px 0;
}
.rule-list {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
}
.rule-list-title {
  font-size: 15px;
  color: #555;
}
.rule-list-gt {
  position: absolute;
  right: 0;
  font-size: 16px;
  color: #888;
}
</style>